<template>
	<view>
		<view class="titles-bar">
			<view>
				<view class="order-time"> {{ date }}</view>
				<view class="order-count"><span class="count-title">订单总数: </span><span class="count-number"> {{ total }}</span></view>
			</view>
			<view class="time-manage">
				<picker mode="date" :value="date" @change="bindDateChange">
					<image class="time-manage-img" :src="icons.timeManage"></image>
				</picker>
			</view>
		</view>
		<view class="table-head">
			<view>
				<checkbox-group @change="allChange">
					<checkbox value="1" :checked="checkAll" color="#FFCC33" style="transform:scale(0.7)" />
				</checkbox-group>

			</view>
			<view v-for="(item, index) in headList" :key="index" class="head-item">
				{{ item.name }}
			</view>
		</view>
		<view class="table-content">
			<checkbox-group @change="checkboxChange">
				<view v-for="(item, index) in list" :key="index" class="content-list">
					<view>
						<checkbox :disabled="item.status!==1?true:false" :class="item.status!==1?'disabled':''" :value="item.id" :checked="item.checked"
						 color="#FFCC33" style="transform:scale(0.7)" />
					</view>
					<view class="content-item">
						{{ item.alias }}
					</view>
					<view class="content-item">
						{{ item.goods_name }}
					</view>
					<view class="content-item">
						{{ item.sum_number }}
					</view>
					<view class="content-item">
						<span v-if="item.status === 1">备货中</span>
						<template v-else>
							<span style="color:#FF5500;margin-right: 4rpx;">{{ item.code }}</span>
							<span>{{ item.setout_time.split(' ')[1] }}</span>
						</template>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="flex-submit">
			<view class="submit-button" @click="submitStock()">
				备货完成
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/title-bar/index.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';

	export default {
		components: {
			titleBar,
			uniPopup
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: '',
				list: [],
				total: 0,
				checkedItems: [],
				checkAll: false,
				start_date: currentDate,
				end_date: currentDate,
				other: '请输入',
				icons: {
					timeManage: '/static/images/icon_sj@3x.png',
					submitButton: '/static/images/bg_btn@3x.png'
				},
				headList: [{
					name: '机器点位'
				}, {
					name: '菜品名称'
				}, {
					name: '数量'
				}, {
					name: '状态'
				}],

			}
		},
		created() {
			// let key = this.getUrlKey('key')
			// if (key) {
			// 	this.getMess(key);
			// } else {
			// 	const _this = this;
			// 	let token = "";
			// 	uni.getStorage({
			// 		key: 'uerInfo',
			// 		success: function(res) {
			// 			_this.keepLogin(res.data.token)
			// 		}
			// 	});
			// }
			console.log('123')
			this.getList();
			this.date = this.dateMode(new Date(), 'nowDate')
		},
		methods: {
			keepLogin(token) {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_admin_keepLogin",
					version: "1.0",
					type: 2,
					data: {
						token: token
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			getMess(key) {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_admin_login",
					version: "1.0",
					type: "1",
					data: {
						key: key
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			getList() {
				const path = {
					app:"wxadmin",
					api:"api_wxadmin_supplier_getList",
					version:"1.0",
					type:"",
					data: {
						date: this.date
					}
				}
				console.log('path', path)
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			checkboxChange(e) {
				this.checkedItems = e.detail.value;
				let count = 0;
				this.list.forEach(element => {

					if (element.status === 1) {
						count++;
					}
				})
				if (this.checkedItems.length === count) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
				var items = this.list;
				var values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.id)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			allChange(e) {
				if (e.detail.value.length > 0) {
					this.checkAll = true;
					const officer = this.list;
					this.checkedItems = officer.map(officer => officer.id);
					var items = this.list;
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						if (item.status === 1) {
							this.$set(item, 'checked', true)
						}
					}
				} else {
					this.checkAll = false;
					this.checkedItems = [];
					var items = this.list;
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						this.$set(item, 'checked', false)
					}
				}
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value
				this.getList()
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			changTime() {
				this.$refs.timePopup.open();
			},
			timeSelect(statu) {
				this.$refs.timePopup.close();
			},
			submitStock() {
				if (this.checkedItems.length > 0) {
					const path = {
						app: "wxadmin",
						api: "api_wxadmin_supplier_finish",
						version: "1.0",
						type: 2,
						data: {
							ids: this.checkedItems.join(',')
						}
					}
					const _this = this;
					_this.sendSock(path, function(res) {
						_this.getSock(res.data)
					})
				} else {
					uni.showToast({
						icon: "none",
						title: '请选择备餐',
						duration: 2000
					});
				}
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);

					} else {
						if (resj.api === "api_wxadmin_admin_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wxadmin_admin_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wxadmin_supplier_getList") {
							const data = resj.data
							data.forEach(element => {
								element.id = element.id.toString();
								element.checked = false;
							})
							this.list = data
							this.total = resj.data.count;
						} else if (resj.api === "api_wxadmin_supplier_finish") {
							uni.showToast({
								icon: "none",
								title: "备餐成功",
								duration: 2000
							});
							this.getList()
						}
					}
				}
			}
		}
	}
</script>

<style>
	.titles-bar {
		width: 100%;
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx 0 30rpx;
		box-sizing: border-box;
	}

	.time-manage {
		width: 70rpx;
		height: 70rpx;
		padding-top: 8rpx;
		box-sizing: border-box;
	}

	.table-head {
		height: 82rpx;
		display: flex;
		align-items: center;
		background-color: #f7f5f6;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		padding: 0 30rpx;
	}

	.head-item {
		flex: 1;
	}

	.content-list {
		height: 82rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.content-item {
		flex: 1;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.leave_cont {
		background-color: #ffffff;
	}

	.leave_cont .ul {
		padding: 0 30rpx;
	}

	.leave_cont .ul .li {
		display: flex;
		align-items: center;
	}

	.leave_cont .ul .li:not(:last-child) {
		border-bottom: 1rpx solid #efefef;
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
		font-size: 34rpx;
		font-family: "黑体";
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		text-align: right;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.time-header {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e5e5e5;
		height: 98rpx;
		align-items: center;
	}

	.time-items {
		padding: 0rpx 28rpx;
		font-size: 36rpx;
	}

	.time-cancel {
		color: #888;
	}

	.time-confirm {
		color: #007aff;
	}

	.order-time {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.order-count {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 30rpx;
		margin-top: 20rpx;
	}

	.count-title {
		color: #999999;
	}

	.count-number {
		margin-left: 10rpx;
		color: #ff5500;
	}

	.flex-submit {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 80rpx;
	}

	.submit-button {
		width: 700rpx;
		height: 108rpx;
		background: url("~@/static/images/bg_btn@3x.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 12rpx;
	}

	.time-manage-img {
		width: 70rpx;
		height: 70rpx;
	}
</style>
